import React,{Component} from  'react'
import { Table,Pagination,Select,Input ,Row,Col,Button} from 'antd';
import {connect} from 'react-redux'
import { Link ,Switch,Route} from 'react-router-dom'
import {getOrderList} from "../../redux/order.redux";
import './order.less';
const columns = [{
    title: '订单号',
    dataIndex: 'orderNo',
    render: orderId =>  <Link to={"/order/detail/"+ orderId} href="javascript:;">{orderId}</Link>,
}, {
    title: '收件人',
    dataIndex: 'receiverName',
}, {
    title: '订单状态',
    dataIndex: 'statusDesc',
},
    {
        title: '订单总价',
        dataIndex: 'payment',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
    },
    { title: '操作', dataIndex: 'orderNo', key: 'x', render: (orderId) => <Link to={"/order/detail/"+ orderId} href="javascript:;">查看</Link> },
];
class Order extends Component{
    constructor(props){
        super(props);
        this.state={
            search:''
        }
    }
    onChangePage(pageNumber) {
        if(this.state.search){
            this.props.getOrderList({
                listType: 'search',
                pageNum: pageNumber,
                orderNo: this.state.search
            });
        }else{
            this.props.getOrderList({
                pageNum: pageNumber
            });
        }
    }

    componentDidMount() {
        this.props.getOrderList(1);
    }
    handleChange(e){
        this.setState({
            search: e.target.value
        })

    }
    search(){
        if(this.state.search){
            this.props.getOrderList({
                listType: 'search',
                pageNum: 1,
                orderNo: this.state.search
            });
        }else{
            this.props.getOrderList({
                pageNum: 1
            });
        }
    }

    render(){

        const Option = Select.Option;

        return (
                <div className='order'>
                    <h1 className='page-header'>用户管理</h1>
                    <div style={{marginBottom:'20px '}}>
                        <Row gutter={10}>
                            <Col span={13}>
                                <Row gutter={150}>
                                    <Col span={2}>
                                        <Select
                                            defaultValue="orderNum" >
                                            <Option value="orderNum">按订单号查询</Option>
                                        </Select>
                                    </Col>
                                    <Col span={18}>
                                        <Input onChange={v=>this.handleChange(v)} placeholder="订单号" />
                                    </Col>
                                </Row>
                            </Col>

                            <Col gutter={12} span={2}>
                                <Button onClick={this.search.bind(this)} type="primary">搜索</Button>
                            </Col>
                        </Row>
                    </div>
                    <Table size='small'
                           pagination={false}
                           columns={columns}
                           dataSource={this.props.data.list}
                           bordered
                    />
                    <div className="pagination">
                        { this.props.data.total?<Pagination style={{textAlign:'center'}} showQuickJumper onChange={this.onChangePage.bind(this)} pageSize={10} defaultCurrent={this.props.data.current} total={this.props.data.total} />:null}
                    </div>
                </div>
        )
    }
}


function mapStateToProps(state){
    console.log(state.order)
    return state.order;
}

const mapDispatchToProps = (dispatch) => ( { // <- forgot the wrapping with ( here
    getOrderList: (pageNum) => {
        dispatch(getOrderList(pageNum))
    }
} )
export default connect(mapStateToProps, mapDispatchToProps)(Order);

